<template>
  <div>
    <div class="row">
      <div v-for="column in columnList" :key="column.id" class="col-4 mb-4">
        <div class="card h-100 shadow-sm" style="width: 18rem">
          <div class="card-body text-center">
            <img
              :src="column.avatar && column.avatar.url"
              class="rounded-circle border  border-light w-25 my-3"
              alt="..."
            />
            <h5 class="card-title">{{ column.title }}</h5>
            <p class="card-text">{{ column.description }}</p>
            <runter-link :to="`/column/${column._id}`"  class="btn btn-outline-primary">进入专栏</runter-link>
            <!-- <a href="#" class="btn btn-primary">进入专栏</a> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
// import router from "@/router";
import { computed, defineComponent, PropType } from "vue";
// export interface ColumnProps {
//   id: number;
//   title: string; //标题
//   avatar: string; //头像
//   description: string; //描述
// }


import { ColumnProps } from "../store";
export default defineComponent({
    name: "ColumnList",
    props: {
        list: {
            type: Array as PropType<ColumnProps[]>, //as类型断言
            required: true, //属于一个必填项
        },
    },
    setup(props) {
      //默认图片
        const columnList = computed(() => {
            return props.list.map((column) => {
                if (!column.avatar) {
                    column.avatar = {
                     url:  require("@/assets/logo.png"),
                    };
                }
                return column;
            });
        });
        return {
            columnList,
        };
    },
    // components: { router }
});
</script>
